<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .active {
        width: 300px;
        height: 300px;
        background: salmon;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <div id="wrap"></div>
    <input type="text" id="username" />
    <input type="text" id="age" />
    <button id="btn">确认信息</button>
    <script>
      str = `hello
            <br />
             world`

      console.log(str)

      // 模板字符串中加入变量和表达式  ${}
      let age = 17
      var str2 = `你的年龄是：${age} 你${age >= 18 ? '成年' : '未成年'} `
      document.getElementById('box').innerHTML = str2
      var flag = false

      var str3 = `<div class="${true ? 'active' : ''}">内容</div>`
      // document.getElementById('wrap').innerHTML = str3
      var li = document.createElement('li')
      li.innerHTML = str3
      document.getElementById('wrap').appendChild(li)
      //3函数类型的表达式
      var str4 = `你的体重：${sum(120, 20)} `
      function sum(a, b) {
        return a + b
      }
      console.log(str4)

      //   alert`Hello world!` 等价于 alert('Hello world!')
      alert`Hello world!`
      // 4模板字符串 作为参数传递
      function fna(stringArr, ...values) {
        // stringArr----模板字符串中除变量外的部分
        console.log(stringArr)
        console.log('-------------')
        // values 接受模板字符串中所有变量
        console.log(values)
        if (values[1] < 18) {
          alert('未满18禁止访问')
          window.close()
        }
      }

      var btn = document.getElementById('btn')
      btn.onclick = function() {
        let username = document.getElementById('username').value
        let age = document.getElementById('age').value

        fna`My Name is ${username},I am ${age} years old next year.`
      }
    </script>
  </body>
</html>
